<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
      .one_sku{
        height: 80px;
        margin-top: 20px;
      }
      .sku_info{
        display: flex;
      }
      .sku_info ul{
       display: flex;
       height: 80px;
       align-items: center;
       list-style: none;
      
      }
    .sku_info ul li{
      width: 130px;
      text-align: center;
      padding: 10px 0;
      border: 1px solid blue;
      margin-right: 10px;
      cursor: pointer;
      }
    
  </style>
  <div id="app">
    <h1>规格</h1>
     <div class="skulist">
         <div class="one_sku" v-for="(item,index) in skus" :key="index">
            <div class="sku_info">
              <h1>{{item.title}}:</h1>
              <ul>
                <li v-for="(listItem,index) in item.list" :key="index">{{listItem.name}}</li>
                
              </ul>
            </div>
          </div>
      </div>
      <hr>
      <!-- v-for 循环对象 -->
       <div>
        <!-- value 对象的值  key 对象的key index 对象的下标 -->
         <div v-for="(value,key,index) in car">
          {{index}}---{{key}}---
          <img v-if="key=='img'" :src="value">
          <span v-else>{{value}}</span>
         </div>
       </div>
       <!-- 固定循环次数 
        item --从1 开始 到10 
       -->
        <div v-for="item in 10">
            第{{item}}章节
        </div>
  </div>
  <script src="./vue.js"></script>
   <script>
      new Vue({
        el:"#app",
        data(){
          return {
            car:{
              name:"Q7",
              price:1000000,
              img:"https://img1.baidu.com/it/u=1650749666,3141140557&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
              desc:"这是一款非常不错的汽车"
            },
            // 规格数据
            skus:[
              {
                title:"内存",
                list:[
                  {name:"8G"},
                  {name:"12G"},
                  {name:"16G"}
                ]
              },
              {
                title:"颜色",
                 list:[
                  {name:"白色"},
                  {name:"黑色"},
                  {name:"远峰蓝"}
                ]
              },
              {
                title:"型号",
                 list:[
                  {name:"iphone17"},
                  {name:"iphone17Pro"},
                  {name:"iphone17ProMax"}
                ]
              }
            ]
          }
        }
      })
   </script>
</body>
</html>